<template>
    <div class="header-content">
        <el-form id="header-query" label-width="110px" style="width: 80%" ref="searchParam" :model="searchParam">
            <el-form-item label="产品代码/名称" prop="fundCode">
                <!-- 产品接口 -->
                <!-- <RiskEntryInputs
                    @set-entry-data="val => (searchParam.fundCode = val)"
                    :showDis="false"
                    :showAll="false"
                    :returnDatas="searchParam.fundCode"
                    dictKey="fundProductCode"
                /> -->
                <el-select v-model="searchParam.fundCode" filterable multiple collapse-tags clearable size="mini">
                    <el-option
                        v-for="i in computedFundStorage"
                        :key="i.fundProductCode"
                        :label="i.fundProductCode + ' ' + i.fundName"
                        :value="i.fundProductCode"
                    >
                    </el-option>
                </el-select>
                <!-- <RiskEntryInputs :showAll="false" @set-entry-data="getAccountDebarValue" :showDis="false" :returnDatas="searchParam.fundCodes" /> -->
            </el-form-item>

            <el-form-item label="查询类型" prop="eventStatus">
                <el-select v-model="searchParam.eventStatus" filterable clearable size="mini" @change="changeEventStatus">
                    <el-option v-for="item in searchTypeList" :key="item.dictKey" :value="item.dictKey" :label="item.dictKeyName"> </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="统计开始日期" prop="startTradeDate">
                <el-date-picker
                    v-model="searchParam.startTradeDate"
                    type="date"
                    size="mini"
                    style="width: 100%"
                    value-format="yyyyMMdd"
                    format="yyyy-MM-dd"
                    :disabled="searchParam.eventStatus == '0'"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item label="统计结束日期" prop="endTradeDate">
                <el-date-picker
                    v-model="searchParam.endTradeDate"
                    type="date"
                    size="mini"
                    style="width: 100%"
                    value-format="yyyyMMdd"
                    format="yyyy-MM-dd"
                    :disabled="searchParam.eventStatus == '0'"
                >
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div class="btn">
            <el-button type="primary" size="mini" @click="handleButton('search')">查询</el-button>
            <el-button size="mini" @click="handleButton('reset')">重置</el-button>
            <el-button size="mini" @click="handleButton('loadout')">导出</el-button>
            <el-button size="mini" @click="handleButton('doLayout')"> 布局设置</el-button>
        </div>
    </div>
</template>
<script lang="ts">
import RiskEntryInputs from '@/common/components/risk-entry-inputs.vue';
import { SGU_CACHE } from '@/utils/diction-const-util';
import { changeOptions } from '@/utils/tools';
import { Component, Vue, Watch } from 'vue-property-decorator';
import { ProductStatisticsDTO } from '../../vo/transfinite-Indicator';

@Component({
    name: 'ProductStatisticsCondition',
    components: { RiskEntryInputs },
})
export default class ProductStatisticsCondition extends Vue {
    searchParam: ProductStatisticsDTO = {
        eventStatus: '0',
        fundCode: [],
        startTradeDate: '',
        endTradeDate: '',
    };

    // 查询类型下拉列表
    searchTypeList: any[] = [
        { dictKeyName: '存量', dictKey: '0' },
        { dictKeyName: '历史', dictKey: '1' },
    ];

    fundStorage: any[] = [];

    // 已选项前置
    get computedFundStorage() {
        let arr = changeOptions(this.searchParam.fundCode, this.fundStorage, 'fundProductCode');
        return arr;
    }

    async mounted() {
        this.fundStorage = await SGU_CACHE('FundInfoByUser', '/fundInfo/list/byUser/like', []);
    }

    @Watch('searchParam', { deep: true, immediate: true })
    handleSearchParam(): void {
        this.$emit('comReturn', {
            searchParam: this.searchParam,
        });
    }

    /**
     * 操作行
     */
    handleButton(type: string) {
        if (type == 'reset') {
            (this.$refs.searchParam as any).resetFields();
            this.searchParam.fundCode = [];
            // TODO
        } else {
            this.$emit('handleButton', type);
        }
    }
    /**
     * 改变查询类型
     */
    changeEventStatus(value: string) {
        if (value === '0') {
            this.searchParam.endTradeDate = '';
            this.searchParam.startTradeDate = '';
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../../../style/cmschina.scss';

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    column-gap: 10px;
    .btn {
        display: flex;
    }
}
#header-query {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    /deep/ .el-form-item {
        margin-bottom: 4px;
        .el-form-item__label {
            color: black;
            padding-right: 2px;
        }
    }
}

/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light {
    display: flex;
    align-items: center;
    width: 65%;
    max-width: fit-content;
    padding-right: 5px;
    padding-left: 0px;
    margin: 2px 0 2px 2px;
    .el-select__tags-text {
        display: inline-block;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/deep/ .el-select__tags {
    flex-wrap: nowrap;
}

/deep/ .el-date-editor .el-range-separator {
    padding: 0 15px 0 0px;
}
</style>
